<template>
  <div>
    <el-dialog :title="title" center :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" :before-close="handleCloseSelect">
      <el-form ref="formRef" :model="params" inline label-width="100px">
        <template v-if="selectType == 'goods'">
          <el-form-item label="商品名称" prop="title">
            <el-input v-model="params.title" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="所属店铺" prop="shop_name">
            <el-input v-model="params.shop_name" placeholder="请输入"></el-input>
          </el-form-item>
        </template>
        <template v-if="selectType == 'shop'">
          <el-form-item label="门店名称" prop="shop_name">
            <el-input v-model="params.shop_name" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="法人手机号" prop="mobile">
            <el-input v-model="params.mobile" placeholder="请输入"></el-input>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button type="primary" @click="getDataList()">查询</el-button>
          <el-button type="warning" @click="resetPamars()">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="multipleTableGoods" :data="list" style="width: 100%" :row-key="getRowKeys" @selection-change="handleSelectionChange"
        v-if="selectType == 'goods'">
        <el-table-column type="selection" width="55" :selectable="selectable" :reserve-selection="true">
        </el-table-column>
        <el-table-column align="center" label="序号" width="80">
          <template slot-scope="{$index}">
            <div>
              {{ $index + (params.page - 1) * params.limit + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品图片">
          <template slot-scope="scope">
            <el-popover placement="top-start" trigger="hover">
              <a :href="scope.row.cover" target="_blank" title="查看最大化图片"><img :src="scope.row.cover" style="width: 300px;height: 300px" /></a>
              <img slot="reference" :src="scope.row.cover" @click="$openImg(scope.row.cover)" style="width: 50px;height: 50px; cursor:pointer" />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品名称" prop="title"></el-table-column>
        <el-table-column align="center" label="所属店铺" prop="shop_name"></el-table-column>
        <el-table-column align="center" label="价格" prop="min_sale_price"></el-table-column>
        <el-table-column align="center" label="实际销量" prop="real_sale_num"></el-table-column>
        <el-table-column align="center" label="贡献值" prop="consumption_value"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{row}">
            <div>
              <el-button type="text" @click="look('goods', row.id)">查看</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-table ref="multipleTableShop" :data="list" style="width: 100%" :row-key="getRowKeys" @selection-change="handleSelectionChange"
        v-if="selectType == 'shop'">
        <el-table-column type="selection" width="55" :selectable="selectable" :reserve-selection="true">
        </el-table-column>
        <el-table-column align="center" label="序号" width="80">
          <template slot-scope="{$index}">
            <div>
              {{ $index + (params.page - 1) * params.limit + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="店铺名称" prop="shop_name"></el-table-column>
        <el-table-column align="center" label="店铺所在区域">
          <template slot-scope="{row}">
            <div>
              {{ row.province_name + row.city_name + row.area_name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="店铺地址" prop="address"></el-table-column>
        <el-table-column align="center" label="售后电话" prop="customer_service_phone"></el-table-column>
        <el-table-column align="center" label="法人" prop="legal_representative"></el-table-column>
        <el-table-column align="center" label="法人手机号" prop="lr_mobile"></el-table-column>
        <el-table-column align="center" label="入驻时间" prop="create_time"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{row}">
            <div>
              <el-button type="text" @click="look('shop', row.id)">查看</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="params.page" :page-sizes="[3, 10, 20, 50]"
        :page-size="params.limit" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseSelect">取 消</el-button>
        <el-button type="primary" @click="submitSelect">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
export default {
  name: 'select-goods-shop',
  props: {
    selectType: {
      type: String,
      default: ''
    },
    idList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      title: '选择商品',
      dialogVisible: false,
      list: [],
      params: {
        page: 1,
        limit: 3,
        title: '',
        shop_name: '',
        mobile: '',
      },
      totalPage: 0,
      selectList: []
    }
  },
  created () {
    if (this.selectType == 'goods') {
      this.title = '选择商品'
    } else if (this.selectType == 'shop') {
      this.title = '选择门店'
    }
  },
  methods: {
    open () {
      this.dialogVisible = true
      this.getList()
    },
    getRowKeys (row) {
      return row.id
    },
    look (type, id) {
      this.$emit('lookGoodsOrShopDetail', { type, id })
    },
    // 获取列表数据
    getList () {
      if (this.selectType == 'goods') {
        seviceApi.getGoodsAllList({ ...this.params, verify_status: 1, added: 1 }).then(res => {
          if (res && res.data.code == 200) {
            this.list = res.data.page.list
            this.totalPage = res.data.page.totalCount
          }
        })
      } else if (this.selectType == 'shop') {
        seviceApi.getShopList({ ...this.params, union_business: 1, is_show: 1 }).then(res => {
          if (res && res.data.code == 200) {
            this.list = res.data.page.list
            this.totalPage = res.data.page.totalCount
          }
        })
      }
    },
    handleCloseSelect () {
      this.dialogVisible = false
      this.$refs.formRef.resetFields()
      if (this.selectType == 'goods') {
        this.$refs.multipleTableGoods.clearSelection()
      } else if (this.selectType == 'shop') {
        this.$refs.multipleTableShop.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.selectList = val
    },
    selectable (row, index) {
      if (this.idList.length > 0) {
        for (let id of this.idList) {
          if (id == row.id) {
            return false
          }
        }
      }
      return true
    },
    submitSelect () {
      if (this.selectList.length == 0) return this.$message.warning('请至少选择一项')
      this.$emit('selectGoodsOrShop', this.selectList)
      this.handleCloseSelect()
    },
    // 每页数
    sizeChangeHandle (val) {
      this.params.limit = val
      this.getList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.params.page = val
      this.getList()
    },
    // 查询
    getDataList () {
      this.params.page = 1
      this.getList()
    },
    resetPamars () {
      this.$refs.formRef.resetFields()
      this.getDataList()
    },
  }
}
</script>

<style lang="scss" scoped></style>